<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义表单</title>
		<link rel="stylesheet" type="text/css" href="common.css" />
		<link rel="stylesheet" type="text/css" href="formDesign.css"/>
	</head>
	<body>
		<div id="root">
			<div class="form-design">
				<div class="form-design-left">
					<div class="widget-item-template" widgetType="text" draggable="true"
						ondragstart="handleOndragstart(event)">
						<div class="widget-type-item">
							<div class="widget-type-item-name">文本</div>
						</div>
					</div>

					<div class="widget-item-template" widgetType="number" draggable="true"
						ondragstart="handleOndragstart(event)">
						<div class="widget-type-item">
							<div class="widget-type-item-name">数字</div>
						</div>
					</div>

					<div class="widget-item-template" widgetType="select" draggable="true"
						ondragstart="handleOndragstart(event)">
						<div class="widget-type-item">
							<div class="widget-type-item-name">下拉选项</div>
						</div>
					</div>

					<div class="widget-item-template" widgetType="textarea" draggable="true"
						ondragstart="handleOndragstart(event)">
						<div class="widget-type-item">
							<div class="widget-type-item-name">长文本</div>
						</div>
					</div>
					<div style="clear: both;"></div>
				</div>
				<div class="form-design-middle">
					<div class="form-design-middle-inner">
						<!-- 手机模型 -->
						<div class="phone-wrapper">
							<div class="phone-wrapper-screen">
								<div class="field-list" id="fieldList" ondragover="handleOndragover(event)"
									ondragleave="handleOndragleave(event)" ondrop="handleOndrop(event)">
									<div class="field-list-header">收款单</div>
								</div>
							</div>
						</div>
					</div>

				</div>
				<div class="form-design-right" id="config-panel" v-if="configPanelDispaly">
					<div class="item-attribute" >
						<div class="panel">
							<div class="title">
								文本
							</div>
							<div class="base-form-item">
								<div class="base-form-item-label-parent">
									<label class="base-form-item-label base-form-item-label-required">
										<span>标题</span>
									</label>
								</div>
								<div class="base-form-item-control-wrapper">
									<input placeholder="" v-model="config.title" type="text" class="eic-input" value="项目">
								</div>
							</div>
							<div class="base-form-item">
								<div class="base-form-item-label-parent">
									<label class="base-form-item-label">
										<span>默认提示</span>
									</label>
								</div>
								<div class="base-form-item-control-wrapper">
									<input placeholder="" type="text" v-model="config.placeholder" class="eic-input" value="项目">
								</div>
							</div>
							<!-- 选项 -->
							<div class="base-form-item" v-if="config.options">
								<div class="base-form-item-label-parent">
									<label class="base-form-item-label">
										<span>选项</span>
									</label>
								</div>
								<div class="base-form-item-label-parent">
									<label class="base-form-item-label">
										<input type="radio" value="手动添加" v-model="config.options.dataSource">
										<span>手动添加</span>
									</label>
									<label class="base-form-item-label">
										<input type="radio" value="使用外部选项" v-model="config.options.dataSource">
										<span>使用外部选项</span>
									</label>
								</div>
								<div class="base-form-item-control-wrapper" v-if="config.options.dataSource==='手动添加'">
									<div class="form-options-v2-option-box" draggable="true" v-for="item in config.options.fixedValues">
										<span class="universe-icon" draggable="true" style="font-size: 16px; margin-right: 4px; color: rgb(143, 149, 158);"><svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-icon="DragOutlined"><path d="M8.25 6.5a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Zm0 7.25a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Zm1.75 5.5a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM14.753 6.5a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5ZM16.5 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0Zm-1.747 9a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z" fill="currentColor"></path></svg></span>
										<div class="form-options-v2-option">
											<input placeholder="" style="" v-model="item" type="text" class="eic-input">
										</div>
										<div class="delete-btn">
											<span @click="config.options.fixedValues=config.options.fixedValues.filter(i => i !== item)" class="universe-icon form-options-v2-option-delete-icon">
											<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-icon="DeleteTrashOutlined"><path d="M8 4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2h5a1 1 0 1 1 0 2h-1v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6H3a1 1 0 0 1 0-2h5ZM6 6v14h12V6H6Zm4 3a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1Z" fill="currentColor"></path></svg></span>
										</div>
									</div>
									
									<div class="add-operator" @click="config.options.fixedValues.push('选项'+(config.options.fixedValues.length+1))">＋ 添加选项</div>
								</div>
							</div>
							<!-- 设置默认值 -->
							<div class="base-form-item">
								<div class="base-form-item-label-parent">
									<label class="base-form-item-label">
										<span>设置默认值</span>
										<input type="checkbox" v-model="config.defaultValue.enable" value="">
									</label>
								</div>
								<div class="base-form-item-control-wrapper" v-if="config.defaultValue.enable">
									<input placeholder="" type="text" v-model="config.defaultValue.value" class="eic-input" value="默认值">
								</div>
							</div>
							
							
							<div class="base-form-item">
								<div class="base-form-item-label-parent">
									<label class="base-form-item-label">
										<span>其他可选</span>
									</label>
								</div>
								<div class="base-form-item-control-wrapper">
									<label class="base-form-item-label">
										<span>必填</span>
										<input type="checkbox" v-model="config.required">
									</label>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="common.js" type="text/javascript" charset="utf-8"></script>
<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var gragoverId = null;
	var list = document.getElementById("fieldList")

	function handleOndragstart(e) {
		gragoverId = e.target.id;
		e.dataTransfer.setData('widgetType', JSON.stringify({
			widgetType: e.target.getAttribute("widgetType")
		}));
		console.log(gragoverId);
	}

	function handleOndragover(e) {
		e.preventDefault();
		e.target.style.border = "1px solid #336df4"
	}

	function handleOndragleave(e) {
		console.log("离开容器")
		e.target.style.border = "1px solid #fff"
	}

	function handleOndrop(e) {
		console.log("父元素drop事件")

		let eventData = JSON.parse(e.dataTransfer.getData("widgetType"));
		let widgetType = eventData.widgetType;
		let sourceId = eventData.id;

		//来自货架的控件
		if (sourceId) {
			e.target.appendChild(document.getElementById(sourceId));
		} else {
			if (widgetType === "text") {
				e.target.appendChild(new TextWidget('form').getElement())
			}
			if (widgetType === "number") {
				e.target.appendChild(new NumberWidget('form').getElement())
			}
			if (widgetType === "select") {
				e.target.appendChild(new SelectWidget('form').getElement())
			}
			if (widgetType === "textarea") {
				e.target.appendChild(new TextAreaWidget('form').getElement())
			}
		}
	}

	class Widget {
		constructor(source) {
			this.config = {};
			this.element = document.createElement("div");
			this.element.setAttribute("class", "widget");
			this.id = (new Date().getTime() + "").substring(7);
			this.element.setAttribute("id", this.id)
			this.element.setAttribute("draggable", true)
			this.element.setAttribute("source", source);
			//操作按钮组
			this.operationBar = document.createElement("div");
			this.operationBar.setAttribute("class", "field-item-operationBar");
			//复制按钮
			this.copyBtn = document.createElement("div");
			this.copyBtn.setAttribute("class", "copy-btn");
			this.copyBtn.innerText = "复制";
			this.operationBar.appendChild(this.copyBtn)
			//间隔符号
			this.space = document.createElement("div");
			this.space.innerText = "|";
			this.operationBar.appendChild(this.space)
			//删除按钮
			this.delBtn = document.createElement("div");
			this.delBtn.setAttribute("class", "del-btn");
			this.delBtn.innerText = "删除";
			this.delBtn.addEventListener("click", (e) => {
				this.element.parentNode.removeChild(this.element)
			})
			this.operationBar.appendChild(this.delBtn)
			//安装按钮组
			this.element.appendChild(this.operationBar)

			//控件内容
			this.label = this.createLabel();
			this.element.appendChild(this.label);
			this.formItem = this.createFormItem();
			this.element.appendChild(this.formItem);

			//开始拖拽事件
			this.element.addEventListener("dragstart", (e) => {
				gragoverId = e.target.id;
				console.log(gragoverId);
				//将当前对象作为参数传递给容器
				e.dataTransfer.setData('widgetType', JSON.stringify({
					id: this.id
				}));
			})
			//目标上方悬停事件
			this.element.addEventListener("dragover", (e) => {
				e.target.style.border = "1px solid red"
			})
			//鼠标松开事件
			this.element.addEventListener("drop", (e) => {
				let source = document.getElementById(gragoverId)
				e.stopPropagation();

				let s = source.getAttribute("source")
				console.log("来源", s)
				let w = null
				if (s == "form") {
					w = document.getElementById(gragoverId);
				} else if (s == 'template') {
					w = createItem('form');
				}
				this.element.before(w)
			})

			//点击展示操作按钮事件
			this.element.addEventListener("click", (e) => {
				this.active();
				configPanel.show(this)
			})
		}
		
		setConfig(config){
			this.config = config;
			console.log("Widget：",this.config);
			//刷新组件
			this.setLabel(this.config.title)
		}
		
		//后期考虑让子元素实现设置属性值模块
		
		setLabel(label){
			this.label.innerText=label;
		}
		
		getConfig(){
			return this.config;
		}
	
		getOperationBar() {
			return this.operationBar;
		}

		active() {
			//关闭其他组件的选中状态
			let widgets = document.getElementsByClassName("widget");
			for (var i = 0; i < widgets.length; i++) {
				let w = widgets[i]
				let operationBar = w.firstChild;
				w.style.border = "1px solid #fff";
				operationBar.style.display = "none";
			}
			this.operationBar.style.display = "flex"
			this.element.style.border = "1px solid #336df4"
		}

		createLabel() {
			let label = document.createElement("label");
			label.innerText = "文本";
			return label;
		}
		createFormItem() {
			let input = document.createElement("input")
			input.setAttribute("type", "text")
			return input;
		}

		getElement() {
			return this.element;
		}
	}
	

	class NumberWidget extends Widget {
		constructor(arg) {
			super(arg)
			this.config = {
					title:"标题",
					placeholder:"",
					print:true,
					required:true,
					defaultValue:{
						enable:false,
						value:null
					}
				}
		}
		getConfig(){
			return this.config;
		}
		createLabel() {
			let label = document.createElement("label");
			label.innerText = "数值";
			return label;
		}
		createFormItem() {
			let input = document.createElement("input")
			input.setAttribute("type", "number")
			return input;
		}

		getElement() {
			return this.element;
		}
	}

	class TextWidget extends Widget {
		constructor(arg) {
			super(arg)
			this.config = {
					title:"标题",
					placeholder:"",
					print:true,
					required:true,
					defaultValue:{
						enable:false,
						value:null
					}
				}
		}
		getConfig(){
			return this.config;
		}
		createLabel() {
			let label = document.createElement("label");
			label.innerText = "文本";
			return label;
		}
		createFormItem() {
			let input = document.createElement("input")
			input.setAttribute("type", "text")
			return input;
		}

		getElement() {
			return this.element;
		}
	}

	class TextAreaWidget extends Widget {
		constructor(arg) {
			super(arg)
			this.config = {
					title:"标题",
					placeholder:"",
					print:true,
					required:true,
					defaultValue:{
						enable:false,
						value:null
					}
				}
		}
		getConfig(){
			return this.config;
		}
		createLabel() {
			let label = document.createElement("label");
			label.innerText = "文本";
			return label;
		}
		createFormItem() {
			let input = document.createElement("textarea")
			input.setAttribute("type", "textarea");
			return input;
		}

		getElement() {
			return this.element;
		}
	}

	class SelectWidget extends Widget {
		constructor(arg) {
			super(arg)
			this.config = {
					title:"标题",
					placeholder:"",
					options:{
						dataSource:'手动添加',
						fixedValues:[
							"选项1","选项2","选项3"
						]
					},
					print:true,
					required:true,
					defaultValue:{
						enable:false,
						value:null
					}
				}
		}
		getConfig(){
			return this.config;
		}
		createLabel() {
			let label = document.createElement("label");
			label.innerText = "下拉选项";
			return label;
		}
		createFormItem() {
			let select = document.createElement("select")
			let option = document.createElement("option");
			option.innerText = "选项一"
			let option2 = document.createElement("option");
			option2.innerText = "选项二"
			let option3 = document.createElement("option");
			option3.innerText = "选项三"
			select.appendChild(option)
			select.appendChild(option2)
			select.appendChild(option3)
			return select;
		}

		getElement() {
			return this.element;
		}
	}

	var formContainer = document.getElementById("fieldList");
</script>
<script src="formItemAttributeDesign.js" type="text/javascript" charset="utf-8"></script>
